<div bsModal #createProductModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createProductModal" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-lg" *ngIf="product">
        <div class="modal-content form">
            <form *ngIf="active" #createProductForm="ngForm" class="horizontal-form" novalidate (ngSubmit)="save()">
                <div class="modal-header">
                    <button type="button" class="close" (click)="close()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">
                        <span>添加商品</span>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="form-group">
                                <label class="control-label">名称</label>
                                <input class="form-control input-sm" type="text" id="name" name="name" [(ngModel)]="product.name" required maxlength="32" minlength="2">
                            </div>
                        </div>
                        <div class="col-md-3" *ngIf="isJewelry(product.productType)">
                            <div class="form-group">
                                <label class="control-label">类别</label>
                                <select class="form-control input-sm" name="category" id="category" [(ngModel)]="product.categoryId">
                            <option *ngFor="let category of categories" value="{{category.id}}">{{category.name}}</option>
                        </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">地区:</label>
                                <ngx-address [(ngModel)]="selecedCity" name="address" [options]="cityOptions" (onSelected)="onCitySelected($event)"></ngx-address>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="universityName">发布学校:</label>
                                <ng-select [multiple]="true" [options]="universityNames" [(ngModel)]="product.universityName">
                                </ng-select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">标题轮播</label>
                        <webuploader [options]="imgOptions" (onReady)="onImgReady($event)" (onDestroy)="onImgDestroy()">
                            <div id="uploader-demo" class="wu-example">
                                <div id="fileList" class="uploader-list">
                                    <ng-template [ngIf]="product.attachmentIds.length>0">
                                        <div *ngFor="let fileId of product.attachmentIds" [id]="'images'+fileId" class="file-item thumbnail upload-state-done">
                                            <img [src]="editorConfig.imageUrlPrefix+fileId" style="width:100px;height:100px;" alt="" />
                                            <div class="info"></div>
                                        </div>
                                    </ng-template>
                                </div>
                                <div id="filePicker">选择文件</div>
                            </div>
                        </webuploader>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="control-label">成本价</label>
                                <input class="form-control input-sm" type="number" name="costPrice" [(ngModel)]="product.costPrice" required/>
                            </div>
                        </div>

                        <div class="col-md-3" *ngIf="isJewelry(product.productType)">
                            <div class="form-group">
                                <label class="control-label">店长价</label>
                                <input class="form-control input-sm" type="number" name="agentPrice" [(ngModel)]="product.agentPrice" required/>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="control-label">团队奖励</label>
                                <input class="form-control input-sm" type="number" name="teamBonus" [(ngModel)]="product.teamBonus" required/>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="control-label">建议零售价</label>
                                <input class="form-control input-sm" type="number" name="exFactoryPrice" [(ngModel)]="product.exFactoryPrice" required/>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>描述</label>
                        <ueditor [(ngModel)]="product.graphicContent" [config]="editorConfig" name="graphicContent" [loadingTip]="'加载中……'" (onReady)="onEditorReady" (onDestroy)="onEditorDestroy" (onContentChange)="onEditorContentChange"></ueditor>
                    </div>
                </div>

                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default btn-sm" (click)="close()">取消</button>
                    <button type="submit" class="btn btn-primary blue btn-sm" [disabled]="!createProductForm.form.valid">
                      <i class="fa fa-save"></i>
                      <span>保存</span>
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>